<template>
    <div class="hcontent">
       <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<lunbo :lunbo="lunbo" :imgname="'src'"></lunbo>
					</div>
				</div>
		</div>
        <div class="mui-card" style="overflow:visible;">
			<div class="mui-card-header">{{shopdetails.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner" style="position:relative;">
                    <transition
                    @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter"
                    >
                        <div class="sball"  v-show="show"></div>
                    </transition>
                    <p>市场价:<span style="margin-right:10px"><del> ￥{{shopdetails.market_price}}</del></span> 销售价：<span class="new"> ￥{{shopdetails.sell_price}}</span></p> 
                    <p>
                        购买数量: 
                        &nbsp; 
                         <numbox :max="shopdetails.stock_quantity" @func="getNumber"></numbox>
                        
                    </p>             

                    <div>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click.native="swithBall">加入购物车</mt-button>
                    </div> 
                </div>
            </div>
		</div>
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                       <p>商品货号:{{shopdetails.goods_no}}</p>
                       <p>库存情况:{{shopdetails.stock_quantity}}</p>
                       <p>上架时间:{{shopdetails.add_time|timeformat}}</p>
                </div>
            </div>
            <div class="mui-card-footer footer_b">
                 <mt-button type="primary" size="large" plain  @click.native="duce">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain style="margin-top:10px" @click.native="comment">商品评论</mt-button>
            </div>
	    </div>
    </div>
</template>
<script>
import numbox from '../subcomponent/numbox.vue'
import lunbo from '../subcomponent/lunbo.vue'
import {mapMutations} from 'vuex'
export default {
     data(){
        return {
            shopdetails:{},
            lunbo:[],
            show:false,
            number:1,
        }
    },
    methods:{
        ...mapMutations(['addcar']),
        
         async getShopDetails(){
           const {data} =await this.axios.get("/api/goods/getinfo/" + this.id);
           if(data.status===0){
               console.log(data.message);
               this.shopdetails=data.message[0];
           }
        },
         async getLunbo(){
           const {data} =await this.axios.get("/api/getthumimages/" + this.id);
           if(data.status===0){
               console.log(data.message);
               this.lunbo=data.message;
           }
        },
        
        beforeEnter (el){
            el.style.transform="translate(0, 0)";
        },
        enter(el,done){
                el.offsetWidth
                //设置小球的终止动画

                //获取小球的位置    
                const ballposition=el.getBoundingClientRect();
                // 获取购物车的位置，从而获得小球到购物车的位置
                const cartPosition=document.getElementById("cartps").getBoundingClientRect();
                  
                //算出 小球距离购物车的位置
               const endLeft=cartPosition.left-ballposition.left;
               const endTop=cartPosition.top-ballposition.top;
               el.style.transform="translate("+endLeft+"px,"+endTop+"px)";
               el.style.transition="all .5s cubic-bezier(.11,-0.41,1,.56)";
               done();

        },
        afterEnter(el){
               
               this.show=!this.show;
        },
        swithBall(){
            this.show=!this.show;
           this.addcar({
               id:this.shopdetails.id,
               title:this.shopdetails.title,
               money:this.shopdetails.sell_price,
               kuchun:this.shopdetails.stock_quantity,
               number:this.number,
               src:this.lunbo[0].src,
               state:true
           });
        },
        comment(){
            this.$router.push({ path: `/home/shopcomment/${this.id}`});
        },
        duce(){
             this.$router.push({ path: `/home/duce/${this.id}`})
        },
        getNumber(data){
            this.number=parseInt(data);
        }
    },
    created(){
        this.getShopDetails();
        this.getLunbo();
    } ,
    components:{
        numbox,
        lunbo
    },
    props:["id"]
}
</script>
<style scoped>

.new{
    color:#ff0000;
    font-size: 16px;
    
    font-weight: bold;
}
.hcontent{
        background-color: #eee;
        overflow: hidden;
}

.mint-swipe img{
    height: 180px;
}
.footer_b{
    flex-direction: column;
}
.sball{
    position:absolute;
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 50%;
    left:  136px;
    top:54px;
    z-index: 99999
   }
</style>